<!DOCTYPE html>
<!-- saved from url=(0090)http://people.csail.mit.edu/dnj/teaching/6170/accelerator/modules/objects/code/lights.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../editor/codestyles.css">
    <script src="../editor/codeeditor.js"></script>

	<!--  -->
    <style>
    canvas {position: absolute; left: 580px; top: 67px}
    </style>    
</head>
<body >

<div id="buttons">
	<input type="submit" value="run" id="runIntro" onclick="slide.runCode();">
	<input type="submit" value="clear output" id="clearOutput" onclick="clearOutputBox();">
	<input type="submit" value="revert" id="reloadCode" onclick="location.reload();">
</div>

<canvas id="canvas" height="200" width="200"></canvas>

<!-- <script>
/* uses forEach from JS 1.6; should be supported in all modern browsers */
/*
would really like to place traffic light somewhere else on slide
but am constrained by fact that this runs in an iframe, which 
presumably even prevents accessing object defined outside 
*/
var TrafficLight = function () {
	var img = function (path) {
		// console.debug(path);
		// debugger;
		return $('<img src="'+ path +'">').load();}
	var place = function (image) {$('body').append(image);}
	var position = function (image) {image.css({"top": top+"px", "left": left+"px", "position":"fixed"});}
	var top = 150; var left = 600;
	var current;  // index of light currently showing
	
	var images = [img("red.gif"), img("yellow.gif"), img("green.gif")];
	images.forEach(place); 
	images.forEach(position); 

	// show light with index k
	var show = function (k) {
		current = k;
		for (var i = 0; i < images.length; i++)
			images[i].css("opacity", i===k ? 1 : 0);
		}

	show(0); // initially show red

	var that = {};
	that.red = function () {show(0);}
	that.yellow = function () {show(1);}
	that.green = function () {show(2);}
	that.next = function () {current = (current + 1)%3; show(current);}

	Object.freeze(that);
	return that;
	};
// 	t = TrafficLight();
// t.red();
</script> -->

<script src="trafficlight.js"> </script>

<textarea id="code" name="code" style="display: none;">t = TrafficLight();
t.red();</textarea><div class="CodeMirror"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 8.99306px; left: 49.9884px;"><textarea style="position: absolute; padding: 0; width: 1px; height: 1em" wrap="off" autocorrect="off" autocapitalize="off"></textarea></div><div class="CodeMirror-scroll cm-s-default" tabindex="-1"><div style="position: relative; height: 58.96px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-gutter" style="height: 59px;"><div class="CodeMirror-gutter-text"><pre>1</pre><pre>2</pre></div></div><div class="CodeMirror-lines"><div style="position: relative; z-index: 0; outline: none; margin-left: 41px;"><div style="position: absolute; width: 100%; height: 0; overflow: hidden; visibility: hidden; outline: 5px auto none"></div><pre class="CodeMirror-cursor" style="top: 0px; left: 0px;">&nbsp;</pre><div style="position: relative; z-index: -1; display: none;"></div><div ><pre><span class="cm-variable">t</span> = <span class="cm-variable">TrafficLight</span>();</pre><pre><span class="cm-variable">t</span>.<span class="cm-property">red</span>();</pre></div></div></div></div></div></div></div>

<div id="output"><i>Output</i></div>


</body></html>